<template>
  <div class="common-layout">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '220px'">
        <!-- 菜单头部 -->
        <div class="menu-header" @click="toggleCollapse">
          <el-icon :class="['collapse-icon', { 'rotate-icon': isCollapse }]">
            <component :is="isCollapse ? Expand : Fold" />
          </el-icon>
          <transition name="slide-fade">
            <span v-if="!isCollapse" class="system-title">仓储管理系统</span>
          </transition>
        </div>

        <!-- 菜单主体 -->
        <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          class="flat-menu"
        >
          <!-- 首页 -->
          <el-menu-item index="/Homepage">
            <el-icon><HomeFilled /></el-icon>
            <template #title>首页</template>
            <el-tooltip v-if="isCollapse" effect="dark" content="首页" placement="right" />
          </el-menu-item>

          <!-- 数据大屏 -->
          <el-menu-item index="/DataScreen">
            <el-icon><DataLine /></el-icon>
            <template #title>数据大屏</template>
            <el-tooltip v-if="isCollapse" effect="dark" content="数据大屏" placement="right" />
          </el-menu-item>

          <!-- 库存统计 -->
          <el-menu-item index="/StatisticsView">
            <el-icon><PieChart /></el-icon>
            <template #title>库存统计</template>
            <el-tooltip v-if="isCollapse" effect="dark" content="库存统计" placement="right" />
          </el-menu-item>

          <!-- 库存记录 -->
          <el-menu-item index="/InventoryRecords">
            <el-icon><List /></el-icon>
            <template #title>库存记录</template>
            <el-tooltip v-if="isCollapse" effect="dark" content="库存记录" placement="right" />
          </el-menu-item>

          <!-- 入库管理 -->
          <el-menu-item index="/StorageView">
            <el-icon><Box /></el-icon>
            <template #title>入库管理</template>
            <el-tooltip v-if="isCollapse" effect="dark" content="入库管理" placement="right" />
          </el-menu-item>

          <!-- 出库管理 -->
          <el-menu-item index="/OutboundSView">
            <el-icon><Van /></el-icon>
            <template #title>出库管理</template>
            <el-tooltip v-if="isCollapse" effect="dark" content="出库管理" placement="right" />
          </el-menu-item>

          <!-- 移库管理 -->
          <el-menu-item index="/MoveTheLView">
            <el-icon><Rank /></el-icon>
            <template #title>移库管理</template>
            <el-tooltip v-if="isCollapse" effect="dark" content="移库管理" placement="right" />
          </el-menu-item>

          <!-- 盘库管理 -->
          <el-menu-item index="/InventoryView">
            <el-icon><Checked /></el-icon>
            <template #title>盘库管理</template>
            <el-tooltip v-if="isCollapse" effect="dark" content="盘库管理" placement="right" />
          </el-menu-item>

          <!-- 基础资料 -->
          <el-sub-menu index="/basic-data">
            <template #title>
              <el-icon><Files /></el-icon>
              <span>基础资料</span>
            </template>
            <el-menu-item index="/BusinessPView">
              <el-icon><svg-icon icon-class="supplier" /></el-icon>
              <template #title>往来单位</template>
              <el-tooltip v-if="isCollapse" effect="dark" content="往来单位" placement="right" />
            </el-menu-item>
            <el-menu-item index="/BasicInformation/WareHouse">
              <el-icon><svg-icon icon-class="customer" /></el-icon>
              <template #title>仓库管理</template>
              <el-tooltip v-if="isCollapse" effect="dark" content="仓库管理" placement="right" />
            </el-menu-item>
            <el-menu-item index="/BasicInformation/Brand">
              <el-icon><svg-icon icon-class="goods" /></el-icon>
              <template #title>品牌管理</template>
              <el-tooltip v-if="isCollapse" effect="dark" content="品牌管理" placement="right" />
            </el-menu-item>
            <el-menu-item index="/ProductManage">
              <el-icon><svg-icon icon-class="warehouse" /></el-icon>
              <template #title>商品管理</template>
              <el-tooltip v-if="isCollapse" effect="dark" content="商品管理" placement="right" />
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-container>
        <!-- 顶栏 -->
        <el-header class="main-header">
          <div class="header-content">
            <div class="user-info">
              <el-icon><User /></el-icon>
              <span>管理员</span>
              <el-tag size="small" type="info">admain</el-tag>
            </div>
          </div>
        </el-header>

        <!-- 内容区域 -->
        <el-main class="main-content">
          <RouterView v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <component :is="Component" />
            </transition>
          </RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {
  HomeFilled,
  DataLine,
  PieChart,
  List,
  Box,
  Van,
  Rank,
  Checked,
  Files,
  User,
  Expand,
  Fold
} from '@element-plus/icons-vue';

const router = useRouter();

// 菜单状态
const activeMenu = ref('/dashboard');
const isCollapse = ref(false);

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};
</script>

<style lang="scss" scoped>
$menu-bg: #ffffff;
$primary-color: #409eff;
$hover-color: #f5f7fa;
$text-color: #303133;

.common-layout {
  height: 100vh;
  overflow: hidden;
  background: #f5f7fa;
}

.el-aside {
  background: $menu-bg;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03);
  transition: width 0.28s;
}

.menu-header {
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, $primary-color, lighten($primary-color, 8%));
  cursor: pointer;
  transition: all 0.3s;

  .system-title {
    font-size: 18px;
    margin-left: 12px;
    color: white;
    font-weight: 500;
  }

  .collapse-icon {
    color: rgba(255, 255, 255, 0.9);
    font-size: 22px;
    transition: transform 0.3s;
    
    &.rotate-icon {
      transform: rotate(180deg);
    }
  }
}

.flat-menu {
  border-right: none;
  transition: all 0.28s;

  .el-menu-item,
  .el-sub-menu__title {
    height: 48px;
    line-height: 48px;
    margin: 4px 8px;
    border-radius: 6px;
    color: $text-color;
    transition: all 0.2s;

    &:hover {
      background: $hover-color;
      transform: translateX(2px);
    }

    &.is-active {
      background: linear-gradient(90deg, rgba($primary-color, 0.15), transparent);
      color: $primary-color;
      
      .el-icon {
        color: $primary-color;
      }
    }

    .el-icon {
      font-size: 20px;
      color: mix($text-color, $menu-bg, 70%);
    }
  }

  .el-sub-menu {
    .el-menu-item {
      padding-left: 48px !important;
      margin: 2px 8px;
    }
  }
}

.main-header {
  height: 64px;
  padding: 0 24px;
  background: $menu-bg;
  border-bottom: 1px solid #ebeef5;
  
  .header-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 12px;
      color: $text-color;
      
      .el-icon {
        font-size: 18px;
      }
      
      span {
        font-size: 14px;
      }
      
      .el-tag {
        margin-left: 8px;
      }
    }
  }
}

.main-content {
  background: #f5f7fa;
  padding: 20px;
  min-height: calc(100vh - 64px);
}

// 过渡动画
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.28s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: opacity 0.15s, transform 0.2s;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(10px);
}

// 折叠状态优化
.el-menu--collapse {
  .el-menu-item {
    justify-content: center;
    margin: 4px 0;

    .el-icon {
      margin-right: 0;
    }
  }
  
  .el-sub-menu {
    .el-menu-item {
      padding-left: 20px !important;
    }
  }
}

@media (max-width: 768px) {
  .menu-header {
    height: 56px;
    padding: 0 12px;
    
    .system-title {
      font-size: 16px;
    }
  }
  
  .main-header {
    padding: 0 16px;
    
    .user-info {
      gap: 8px;
      
      span {
        font-size: 13px;
      }
    }
  }
}

</style>